<template>
    <el-card shadow="never" class="d-card">
        <el-row>
            <el-col :span="3" style="border-right:1px solid #F0F2F5;">
                <el-tree-v2 :data="data" :props="props" :height="900" @node-click="onClick"/>
            </el-col>
            <el-col :span="21" style="padding-left: 10px;">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="供应商">
                    <el-input v-model="formInline.user" placeholder="供应商编码"></el-input>
                    </el-form-item>
                    <el-form-item label="门店编码">
                    <el-select v-model="formInline.region" placeholder="门店编码">
                        <el-option label="Zone one" value="shanghai"></el-option>
                        <el-option label="Zone two" value="beijing"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="收货单">
                    <el-input v-model="formInline.user" placeholder="收货单"></el-input>
                    </el-form-item>
                    <el-form-item label="费用类型" v-model="form.type">
                    <el-select v-model="formInline.region" placeholder="费用类型">
                        <el-option label="Zone one" value="shanghai"></el-option>
                        <el-option label="Zone two" value="beijing"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="支付单">
                    <el-input v-model="formInline.user" placeholder="支付单"></el-input>
                    </el-form-item>
                    <el-form-item>
                    <el-button type="primary">查询</el-button>
                    <el-button >重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData" stripe style="width: 100%;" height="850" :header-cell-style="{backgroundColor: '#F5F7FA'}">
                    <el-table-column type="selection" width="35" />
                    <el-table-column prop="date" label="供商编码" />
                    <el-table-column prop="name" label="供商名称" />
                    <el-table-column prop="address" label="收货单号" width="200" />
                    <el-table-column prop="name" label="订单类型" />
                    <el-table-column prop="name" label="门店编码" />
                    <el-table-column prop="name" label="门店名称" />
                    <el-table-column prop="name" label="结算单号" />
                    <el-table-column prop="name" label="结算公司" />
                    <el-table-column prop="name" label="结算方式" />
                    <el-table-column prop="name" label="是否冻结" />
                    <el-table-column prop="name" label="操作" width="140">
                        <template #default="scope">
                        <el-button>编辑</el-button>
                        <el-button type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <div style="float: right;margin-top: 20px;margin-bottom: 20px;">
      <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="1000"
      >
      </el-pagination>
      </div>
    </el-card>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, defineComponent } from 'vue';
import { TreeNodeData, TreeKey, TreeData } from 'element-plus/es/components/tree/src/tree.type';
import { TreeNode } from 'element-plus/lib/components/tree-v2/src/types';
import { ajax } from '../utils/ajax';

interface Tree {
  id: string
  label: string
  children?: Tree[]
}

const getKey = (prefix: string, id: number) => {
  return `${prefix}-${id}`
}

const createData = (
  maxDeep: number,
  maxChildren: number,
  minNodesNumber: number,
  deep = 1,
  key = 'node'
): Tree[] => {
  let id = 0
  return Array.from({ length: minNodesNumber })
    .fill(deep)
    .map(() => {
      const childrenNumber =
        deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
      const nodeKey = getKey(key, ++id)
      return {
        id: nodeKey,
        label: nodeKey,
        children: childrenNumber
          ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
          : undefined,
      }
    })
}

const props = {
  value: 'id',
  label: 'label',
  children: 'children',
}
const data = createData(4, 30, 40)

const onClick = (data: TreeNodeData, node: TreeNode, e: MouseEvent) => {
    console.log('node.key:' + node.key);
    console.log('node.label:' + node.label);
}

let tableData  = ref([]);
const getTableData = () => {
  ajax.get('/src/mock/userTableData.json', {}, (resp: any) => {
    tableData.value = resp.data;
  });
}

onMounted(() => {
    getTableData();
});

const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(true)
const background = ref(true)
const disabled = ref(false)

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
});

const formInline = reactive({
  user: '',
  region: '',
})
</script>

<style scoped>

</style>